<template>
  <!-- <ScreenModal v-model="isVisible" title="监控详情" :width="oredrList.length > 0 ? 1355 : 985"> -->
  <ScreenModal v-model="isVisible" title="监控详情" :width="985">
    <div class="monitoring" v-loading="loading" element-loading-text="正在进行抓拍，请稍后...."
      element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" style="width: 100%">
      <div class="monitoring_box">
        <div class="monitoring_among">
          <div id="jynPlayer" class="video" style="width: 100%"></div>
        </div>

        <div class="monitoring_bottom">
          <!-- <div class="monitoring-btn" style="padding-left: 0.5rem;">
            <img src="@assets/images/jiankong/jieshuduiua.png" alt="" @click="startTalk" v-if="!start"
              style="width: 3rem;height: 3rem;" />
            <img src="@assets/images/jiankong/dianhua.png" alt="" @click="startTalk" v-if="start"
              style="width: 3rem;height: 3rem;" />
            <span>语音对讲</span>
          </div> -->
          <div class="monitoring-right">
            <div class="monitoring-btn" @click="capturePicture">
              <img src="@assets/images/jiankong/xiangji.png" alt="" />
              <span>巡查抓拍</span>
              <!-- <template v-show="isZhuaPai">...</template> -->
            </div>
            <!-- <div class="monitoring-btn" @click="startSave">
              <img src="@assets/images/jiankong/kaishiluzhi.jpg" alt="" v-if="!opens" />
              <img src="@assets/images/jiankong/jieshuluzhi.jpg" alt="" v-else />
              <span>视频录制</span>
            </div> -->

            <!-- <span style="cursor: pointer;">高清</span> -->
            <!-- <img style="cursor: pointer;" src="@assets/images/jiankong/quanpin.png" alt="" @click="fullScreen" /> -->
          </div>
        </div>
      </div>

      <div class="monitoring_right" v-if="oredrList.length > 0 && false">
        <div class="monitoring_right_title">抓拍案件</div>
        <div class="monitoring_right_list">
          <div class="monitoring_right_list_item" v-for="(item, index) in oredrList" :key="'a' + index">
            <p>抓拍类型：{{ item.type }}</p>
            <p>事件类型：{{ item.c_type }}</p>
            <p>抓拍事件：{{ item.gather_time }}</p>
            <p>抓拍地址： {{ item.address }}</p>
            <p>所属街办：{{ item.street }}</p>
            <p>问题描述：{{ item.content }}</p>
          </div>
        </div>
      </div>
    </div>
    <jian-kong-view ref="jianKongView"></jian-kong-view>
  </ScreenModal>
</template>

<script>
// import EZUIKit from 'ezuikit-js' //萤石云
// import '../../public/ezuikit-new/ezuikit'
import JianKongView from './JianKongview';
import { ZhanDaoJingYing } from "@/api";
var talk = null;
var decoder = null;

export default {
  name: "popup",
  components: { JianKongView },
  props: {
    videoData: {
      type: Object,
    }, //页面类型
  },
  data() {
    return {
      loading: false,
      isVisible: false,
      jynPlayers: null,
      opens: false,
      start: false,
      oredrList: [],
      data: {},
      isZhuaPai: false,
      isInitSound: true
    };
  },
  watch: {
    isVisible: function (value) {
      if (!value) {
        this.$emit('close', this.data)
        decoder.stop();
        decoder.destroy();
        decoder = null
        this.start = false
        this.isZhuaPai = false
        this.isInitSound = true

      }
    }
  },

  methods: {
    open(data) {
      if (!data.token) {
        return
      }
      this.isVisible = true;
      this.isZhuaPai = false
      this.data = data;
      this.captureList(data)
      this.initTalk(data)
    },


    // 截图
    capturePicture() {
      this.$refs.jianKongView.open({
        siteNumber: this.data.siteNumber,
        ...this.data
      })
      this.loading = false
    },

    // 录制
    startSave() {
      this.opens = !this.opens;
      if (this.opens) {
        var startSavePromise = decoder.startSave(`${new Date().getTime()}`);
        startSavePromise.then(function (res) {
        }).catch(function (error) {
        })

      } else {
        var stopSavePromise = decoder.stopSave(0);
        stopSavePromise.then(function (res) {
        }).catch(function (error) {
        })
      }
    },

    // 全屏
    fullScreen() {
      decoder.fullScreen();
    },

    captureList(item) {
      const data = {
        device: item.siteNumber
      }
      ZhanDaoJingYing.GetOredrList(data).then(res => {
        this.oredrList = res.data || [];
      })
    },

    toTime: (value) => {
      let date = new Date(value);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hours = date.getHours();
      let minutes = date.getMinutes();
      return year + "-" + month + "-" + day + ' ' + hours + ":" + minutes;
    },


    // update
    addJs(filepath, callback) {
      var oJs = document.createElement("script");
      oJs.setAttribute("src", filepath);
      oJs.onload = callback;
      document.getElementsByTagName("head")[0].appendChild(oJs);
    },
    initTalk() {
      const data = this.data
      // this.addJs('/ezuikit/ezuikit-talk.js', function () {
      //   talk = new EZUITalk({
      //     accessToken: data.token,
      //     url: data.voiceUrl,
      //     filePath: '/ezuikit/',
      //     handleError: function (err) {
      //     }
      //   });
      // })

      const _this = this
      this.addJs('/ezuikit-new/ezuikit.js', function () {
        decoder = new EZUIKit.EZUIKitPlayer({
          id: "jynPlayer",
          autoplay: true,
          template: 'security',
          url: data.voiceUrl,
          accessToken: data.token,
          width: 865,
          height: 487,
          // audioId: 0,
          // audio: 0,
          handleError: function (e) {
            this.isVisible = false
          },
          openSoundCallBack: function (res) {
            if (_this.isInitSound) {
              _this.isInitSound = false
              decoder.closeSound()
            }
          },
        });
      })




      // })
    },
    startTalk() {
      console.info('开启讲话')
      this.start = !this.start;
      if (this.start) {
        // decoder && decoder.closeSound(0);
        talk.startTalk();
        decoder.openSound()
      } else {
        talk.stopTalk();
        talk.closeSound();
        // decoder && decoder.openSound(0);
      }
    },


  }
};
</script>

<style lang="less" scoped>
::-webkit-scrollbar {
  width: 0;
}

.monitoring {
  height: 100%;
  padding-top: 4rem;
  display: flex;
  justify-content: space-between;

  &_box {
    width: 92.6rem;
    background: rgba(31, 73, 135, 0.3);
    border: 1px solid rgba(35, 104, 255, 0.3);
    padding: 3rem;
  }

  &_top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 2rem;

    img {
      height: 2.4rem;
      margin-left: 2.6rem;
    }
  }

  &_among {
    width: 100%;
    height: 48.7rem;
    border: 1px solid #2368ff;
    margin-top: 2rem;

    .video {
      width: 100%;
      height: 100%;
    }
  }

  &_bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 2.6rem;

    .monitoring-btn {
      cursor: pointer;
      height: 3.2rem;
      background: rgba(31, 73, 135, 0.4);
      border: 1px solid #0074fa;
      border-radius: 1.6rem;
      display: flex;
      align-items: center;
      padding: 0 2.4rem 0 0;
      margin-right: 1rem;

      img {
        width: 3.3rem;
        height: 3.3rem;
        display: inline-block;
        margin-right: 1.1rem;
      }

      span {
        font-size: 1.8rem;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
      }
    }

    .monitoring-right {
      display: flex;
      align-items: center;

      span {
        display: inline-block;
        font-size: 1.8rem;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
      }

      img {
        display: inline-block;
        width: 2.4rem;
        height: 2.4rem;
        margin-left: 2rem;
      }
    }
  }

  &_right {
    width: 34rem;
    height: 100%;
    display: flex;
    flex-direction: column;

    &_title {
      height: 5rem;
      background: rgba(31, 73, 135, 0.6);
      border: 1px solid rgba(129, 167, 250, 0.6);
      font-size: 1.8rem;
      font-family: Noto Sans S Chinese;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
      line-height: 5rem;
    }

    &_list {
      height: 100%;
      max-height: 60.9rem;
      overflow: auto;

      &_item {
        width: 100%;
        padding: 2.2em;
        background: rgba(9, 31, 68, 0.3);
        border: 1px solid rgba(129, 167, 250, 0.6);
        margin-top: 1rem;

        p {
          font-size: 1.4rem;
          font-family: Noto Sans S Chinese;
          font-weight: 400;
          color: #9ed5ff;
          margin-bottom: 1rem;
        }

        p:last-child {
          margin: 0;
        }
      }
    }
  }
}
</style>

<style>
.footer-controls {
  opacity: 1 !important
}
</style>